<template>
	<div v-show="!state.showTable" class="cruise-form">
		<el-form ref="runFormRef" :model="runForm" :rules="runFormRules" label-width="80px">
			<el-form-item label="巡航路径" prop="cruiseIndex">
				<el-row :gutter="20" class="custom-width-full">
					<el-col :span="12">
						<el-select v-model="runForm.cruiseIndex" size="small" popper-class="custom-map-variables" placeholder="请选择">
							<el-option v-for="(item, index) in state.turnCruiseList" :key="index" :label="item.cruiseName" :value="item.cruiseIndex" />
						</el-select>
					</el-col>
					<el-col :span="6" style="padding-right: 0; text-align: right">
						<el-button type="primary" size="small" :disabled="!runForm.cruiseIndex" @click="setHandle">设置点位</el-button>
					</el-col>
				</el-row>
			</el-form-item>
			<el-form-item label="" label-width="0">
				<!-- 0=开始，1=结束，2=暂停 -->
				<div class="custom-width-full" style="display: flex; align-items: center; justify-content: flex-end">
					<el-button type="primary" size="small" @click="runHandle">开始</el-button>
					<el-button type="primary" size="small" @click="stopHandle">停止</el-button>
				</div>
			</el-form-item>
		</el-form>
	</div>

	<!-- 预置位表格 -->
	<div v-show="state.showTable" class="cruise-table">
		<div class="cruise-table--operation">
			<el-button type="primary" size="small" @click="goback">返回</el-button>
			<el-button type="primary" size="small" @click="addTableHandle">添加</el-button>
		</div>
		<el-table :data="state.tableData" size="small" style="width: 100%" max-height="240px" class="cruise-table--table">
			<el-table-column type="index" width="80" label="序号" />
			<el-table-column prop="presetNum" width="70" label="预置位"> </el-table-column>
			<el-table-column prop="time" width="80" label="等待时间" />
			<el-table-column prop="speed" width="50" label="速度" />
			<el-table-column label="操作">
				<template #default="scope">
					<el-button type="primary" link @click="removePoint(scope.$index, scope.row)">移除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
	<!-- 预置位添加 -->
	<el-dialog v-model="state.dialogPresetVisible" append-to-body title="预置位添加" width="500px">
		<el-form ref="presetFormRef" :model="presetForm" label-width="120px">
			<el-form-item label="预置位" prop="presetNum">
				<el-select v-model="presetForm.presetNum" filterable placeholder="请选择">
					<el-option v-for="(item, index) in state.presetList" :key="index" :label="item.ptzPresetName" :value="item.ptzPresetNo"> </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="等待时间(秒)" prop="time">
				<el-input-number v-model="presetForm.time" :step="1" :min="0" :max="999999" placeholder="请输入"></el-input-number>
			</el-form-item>
			<el-form-item label="速度" prop="speed">
				<el-input-number v-model="presetForm.speed" :step="1" :min="0" :max="999999" placeholder="请输入"></el-input-number>
			</el-form-item>
		</el-form>
		<div class="dialog-footer">
			<el-button type="primary" @click="addIndexHandle">确定</el-button>
		</div>
	</el-dialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
	useGetTurnCruiseListApi,
	useRunTurnCruiseApi,
	useStopTurnCruiseApi,
	useTurnPresetListApi,
	useSetTurnCruiseApi,
	useDelTurnCruiseApi
} from '../../../api/contols'

const props = defineProps({
	liveOptions: {
		type: Object,
		default: () => ({}),
		required: true
	}
})

const state = reactive({
	tableState: {},
	dialogPresetVisible: false,
	presetList: [] as any[],
	tableData: [] as any[],
	turnCruiseList: [] as any[],
	showTable: false
})

const runFormRef = ref()
const runForm = reactive({
	cruiseIndex: '' // 巡航路径id
})
const runFormRules = reactive({
	cruiseIndex: [{ required: true, message: '必填项不能为空', trigger: 'blur' }]
})

const presetFormRef = ref()
const presetForm = reactive({ presetNum: '', time: 15, speed: 4 })

const init = () => {
	console.log('props.liveOptions',props.liveOptions)
	if (!props.liveOptions.channelId) {
		return
	}

	useGetTurnCruiseListApi({ channelId: props.liveOptions.channelId }).then(res => {
		state.turnCruiseList = res.data || []
	})
}

const getPreset = () => {
	if (!props.liveOptions.channelId) {
		return
	}
	useTurnPresetListApi({ channelId: props.liveOptions.channelId }).then((res: any) => {
		state.presetList = res.data || []
	})
}

//设置点位
const setHandle = () => {
	state.showTable = true
	const resTableData = state.turnCruiseList.find((d: any) => d.cruiseIndex === runForm.cruiseIndex) || ({} as any)
	state.tableData = resTableData.points || []
}

const goback = () => {
	state.showTable = false
	init()
}

// table-添加
const addTableHandle = () => {
	state.dialogPresetVisible = true
	getPreset()
}

const addIndexHandle = () => {
	if (!props.liveOptions.channelId) {
		return
	}
	useSetTurnCruiseApi({
		channelId: props.liveOptions.channelId,
		cruiseIndex: runForm.cruiseIndex,
		...presetForm,
		routePoint: state.tableData.length + 1
	}).then(() => {
		ElMessage.success('新增成功')
		state.tableData.push({
			routePoint: state.tableData.length + 1,
			...presetForm
		})
		presetFormRef.value?.resetFields()
		state.dialogPresetVisible = false
	})
}

const removePoint = (index: any, row: any) => {
	if (!props.liveOptions.channelId) {
		return
	}
	useDelTurnCruiseApi({
		channelId: props.liveOptions.channelId,
		...row
	}).then(() => {
		ElMessage.success('删除成功')
		state.tableData.splice(index, 1)
	})
}

//开始巡航
const runHandle = () => {
	if (!props.liveOptions.channelId) {
		return
	}
	runFormRef.value?.validate((valid: any) => {
		if (!valid) {
			return false
		}

		useRunTurnCruiseApi({ channelId: props.liveOptions.channelId, routeIndex: runForm.cruiseIndex }).then(() => {
			ElMessage.success('开始运行')
		})
	})
}

//结束巡航
const stopHandle = () => {
	if (!props.liveOptions.channelId) {
		return
	}
	runFormRef.value?.validate((valid: any) => {
		if (!valid) {
			return false
		}

		useStopTurnCruiseApi({ channelId: props.liveOptions.channelId, routeIndex: runForm.cruiseIndex }).then(() => {
			ElMessage.success('结束运行')
		})
	})
}

onMounted(() => {
	init()
})
</script>

<style lang="scss" scoped>
.cruise-form {
	margin: 24px auto;
}

.cruise-table {
	.cruise-table--operation {
		margin: auto;
		text-align: right;
	}

	.cruise-table--table {
		margin-top: 8px;
	}
}

.dialog-footer {
	text-align: right;
}
</style>
